<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>关键字搜索</title>
    <style>
        li {
            list-style: none;
            font-size: 14px;
        }

        #d {
            border: 1px solid #3344bb;
            border-top: 0px;
            width: 300px;
            padding: 2px 5px;
            max-height: 130px;
            overflow: auto;
            display: none;
        }
    </style>
    <script>
        function query() {
            let spell = document.getElementById("spell").value;
            let d = document.getElementById("d");
            // 如果用户没有输入任何内容给,则隐藏div,不做任何操作
            if (spell == "") {
                d.style.display = "none";
                return;
            }
            // 在执行操作之前,需要先清除原来的记录
            d.innerHTML = "";
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let result = xhr.responseText;
                    // console.log(result)
                    let datas = eval("(" + result + ")");
                    // console.log(datas)
                    // 如果数组长度为0,则表示没有查询到任何数据,隐藏div
                    if (datas.length == 0) {
                        d.style.display = "none";
                        return;
                    }
                    // 遍历数据之前,将div中的元素显示出来
                    d.style.display = "block";
                    for (let i = 0; i < datas.length; i++) {
                        d.innerHTML = d.innerHTML + "<li>" + datas[i].message + "</li>";
                    }
                }
            };
            xhr.open("get", "${pageContext.request.contextPath}/query?spell=" + spell);
            xhr.send(null);
        }
    </script>
</head>
<body>
<input type="text" style="width: 312px;" id="spell" onkeyup="query()">
<div id="d">
</div>
</body>
</html>